<template>
  <div class="content-url-set">
    <div class="the-title">获取内容网址 <span v-if="mode === 'normal'">[常规模式]</span><span v-else>[高级模式]</span></div>
    <!-- =================== 常规模式 ====================== -->
    <div class="get-methods" v-if="mode === 'normal'">
      <div class="get-filter">
        <span class="filter-text">获取方式:</span>
        <el-radio-group v-model="urlMethods" size="mini">
          <el-radio-button label="auto">自动获取地址链接</el-radio-button>
          <el-radio-button label="diy">手动设置地址链接</el-radio-button>
        </el-radio-group>
        <el-alert class="filter-tip" type="info" :closable="false">
          <template  v-slot:title>
            <span>
              <i class="el-icon-info"></i>
              <span class="filter-text"> 起始网址就是内容页网址?</span>
              <el-button type="text" size="mini" @click="mode = 'advanced'">点击设置</el-button>
            </span>
          </template>
        </el-alert>
      </div>
      <div class="get-setting">
        <div class="setting-card" v-if="urlMethods === 'auto'">
          <div class="card-header">自动获取地址链接</div>
          <div class="card-body auto-get">
            自动获取该级列表页中a标签(&#60;&#97; href=""&#62;)内的URL链接.(常规模式默认抓取第一级)
          </div>
        </div>
        <div class="setting-card" v-if="urlMethods === 'diy'">
          <div class="card-header">手动设置地址链接</div>
          <div class="card-body diy-get">
            <el-form label-width="80px">
              <el-form-item label="提取规则:">
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="diyForm.rule" type="textarea" ref="getRule" :rows="3" resize="none"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <div class="insert-btn">
                      <el-button type="text" @click="insert('textarea', 'getRule', '[参数]')">[参数]</el-button>
                      <el-button type="text" @click="insert('textarea', 'getRule', '(*)')">(*)</el-button>
                      <el-button type="text" @click="insert('textarea', 'getRule', '[标签:XXX]')">[标签:XXX]</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="拼接地址:">
                <el-row>
                  <el-col :span="18">
                    <el-input v-model="diyForm.url" type="text" ref="spliceUrl" size="mini"></el-input>
                  </el-col>
                  <el-col :span="6">
                    <div class="insert-btn">
                      <el-button type="text" @click="insert('input', 'spliceUrl', '[参数N]')">[参数N]</el-button>
                      <el-button type="text" @click="insert('input', 'spliceUrl', '(*)')">(*)</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-row class="setting-bottom" :gutter="10">
          <el-col :span="12">
            <div class="setting-card">
              <div class="card-header">设置区域</div>
              <div class="card-body set-local">
                <el-button class="divide" type="text" @click="insert('textarea', 'setLocalStart', '(*)')">(*)</el-button>
                <el-input v-model="localForm.start" type="textarea" :rows="5" resize="none" ref="setLocalStart" placeholder="开头字符串"></el-input>
                <div class="divide">-</div>
                <el-input v-model="localForm.end" type="textarea" :rows="5" resize="none" ref="setLocalEnd" placeholder="结尾字符串"></el-input>
                <el-button class="divide" type="text" @click="insert('textarea', 'setLocalEnd', '(*)')">(*)</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="setting-card">
              <div class="card-header">
                链接过滤
                <el-radio-group class="card-header-filter" v-model="urlFilterRadio">
                  <el-radio :label="0">所有条件都必须满足</el-radio>
                  <el-radio :label="1">满足其中一个条件即可</el-radio>
                </el-radio-group>
              </div>
              <div class="card-body url-filter">
                <div class="divide"></div>
                <el-input type="textarea" :rows="5" resize="none" placeholder="不得包含"></el-input>
                <div class="divide">-</div>
                <el-input type="textarea" :rows="5" resize="none" placeholder="必须包含"></el-input>
                <div class="divide"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="setting-link">
          <el-alert type="info" :closable="false" style="display: inline;">
            <template  v-slot:title>
              <span>
                <i class="el-icon-info"></i> 0级或者多级网址? POST获取网址? 提取的数据在列表页内? 请使用高级模式!
              </span>
            </template>
          </el-alert>
          <el-button size="medium" plain @click="goToAdvanced">高级模式<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
      </div>
    </div>
    <!-- =============  高级模式 ========================= -->
    <div class="get-methods advance-mode" v-else>
      <el-row :gutter="10">
        <el-col :span="3">
          <select-list title="多级列表" :height="490">
            <template v-slot:toolItem>
              <div class="tool-item"><icon-tip content="添加列表页规则" eleIcon="el-icon-plus"></icon-tip></div>
              <div class="tool-item"><icon-tip content="删除列表页规则" eleIcon="el-icon-close"></icon-tip></div>
              <div class="tool-item"><icon-tip content="列表上移" eleIcon="el-icon-arrow-up"></icon-tip></div>
              <div class="tool-item"><icon-tip content="列表下移" eleIcon="el-icon-arrow-down"></icon-tip></div>
            </template>
          </select-list>
          <el-button class="to-normal-btn" size="medium" plain @click="goToNormal" icon="el-icon-arrow-left">常规模式</el-button>
        </el-col>
        <el-col :span="21" class="setting-tab">
          <div class="label-title"><i class="el-icon-location"></i>{{selectLabel}}</div>
          <el-tabs v-model="activeAdvancedSet" type="card">
            <!-- 网址获取选项 -->
            <el-tab-pane class="advanced-first" label="网址获取选项" name="first">
              <el-alert type="info" :closable="false">
                <template  v-slot:title>
                  <span>
                    <i class="el-icon-bell"></i> 起始网址就是内容页网址? 请清空多级列表, 不再获取其实网址的下级链接!
                  </span>
                </template>
              </el-alert>
              <div class="get-filter">
                <span class="filter-text">获取方式:</span>
                <el-radio-group v-model="urlMethods" size="mini">
                  <el-radio-button label="auto">自动获取地址链接</el-radio-button>
                  <el-radio-button label="diy">手动设置地址链接</el-radio-button>
                </el-radio-group>
              </div>
              <div class="get-setting">
                <!-- 自动 -->
                <div class="setting-card" v-if="urlMethods === 'auto'">
                  <div class="card-header">自动获取地址链接</div>
                  <div class="card-body auto-get">
                    自动获取该级列表页中a标签(&#60;&#97; href=""&#62;)内的URL链接.(常规模式默认抓取第一级)
                  </div>
                </div>
                <!-- 手动 -->
                <div class="setting-card" v-if="urlMethods === 'diy'">
                  <div class="card-header">手动设置地址链接</div>
                  <div class="card-body diy-get">
                    <el-form label-width="80px">
                      <el-form-item label="提取规则:">
                        <el-row>
                          <el-col :span="18">
                            <el-input v-model="diyForm.rule" type="textarea" ref="getRule" :rows="3" resize="none"></el-input>
                          </el-col>
                          <el-col :span="6">
                            <div class="insert-btn">
                              <el-button type="text" @click="insert('textarea', 'getRule', '[参数]')">[参数]</el-button>
                              <el-button type="text" @click="insert('textarea', 'getRule', '(*)')">(*)</el-button>
                              <el-button type="text" @click="insert('textarea', 'getRule', '[标签:XXX]')">[标签:XXX]</el-button>
                            </div>
                          </el-col>
                        </el-row>
                      </el-form-item>
                      <el-form-item label="拼接地址:">
                        <el-row>
                          <el-col :span="18">
                            <el-input v-model="diyForm.url" type="text" ref="spliceUrl" size="mini"></el-input>
                          </el-col>
                          <el-col :span="6">
                            <div class="insert-btn">
                              <el-button type="text" @click="insert('input', 'spliceUrl', '[参数N]')">[参数N]</el-button>
                              <el-button type="text" @click="insert('input', 'spliceUrl', '(*)')">(*)</el-button>
                              <el-button class="divide" type="text" @click="insert('textarea', 'setLocalStart', '(*)')">(*)</el-button>
                            </div>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <el-row class="setting-bottom" :gutter="10">
                  <el-col :span="12">
                    <div class="setting-card">
                      <div class="card-header">设置区域</div>
                      <div class="card-body set-local">
                        <el-button class="divide" type="text" @click="insert('textarea', 'setLocalStart', '(*)')">(*)</el-button>
                        <el-input v-model="localForm.start" type="textarea" :rows="5" resize="none" ref="setLocalStart" placeholder="开头字符串"></el-input>
                        <div class="divide">-</div>
                        <el-input v-model="localForm.end" type="textarea" :rows="5" resize="none" ref="setLocalEnd" placeholder="结尾字符串"></el-input>
                        <el-button class="divide" type="text" @click="insert('textarea', 'setLocalEnd', '(*)')">(*)</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="setting-card">
                      <div class="card-header">
                        链接过滤
                        <el-radio-group class="card-header-filter" v-model="urlFilterRadio">
                          <el-radio :label="0">所有条件都必须满足</el-radio>
                          <el-radio :label="1">满足其中一个条件即可</el-radio>
                        </el-radio-group>
                      </div>
                      <div class="card-body url-filter">
                        <div class="divide"></div>
                        <el-input v-model="filterForm.expect" type="textarea" :rows="5" resize="none" placeholder="不得包含"></el-input>
                        <div class="divide">-</div>
                        <el-input v-model="filterForm.include" type="textarea" :rows="5" resize="none" placeholder="必须包含"></el-input>
                        <div class="divide"></div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <!-- 分页设置 -->
            <el-tab-pane label="分页设置" name="second">
              <div class="get-filter">
                <span class="filter-text">Http请求方式:</span>
                <el-radio-group v-model="httpMethods" size="mini">
                  <el-radio-button label="get">GET</el-radio-button>
                  <el-radio-button label="post">POST</el-radio-button>
                  <el-radio-button label="aspx">ASPX POST</el-radio-button>
                </el-radio-group>
              </div>
              <!-- get方法分页 -->
              <div class="http-setting http-get" v-if="httpMethods === 'get'">
                <div class="http-title">列表上下页, 无限分页获取</div>
                <div class="page-filter">
                  <span>从下面区域中提取列表分页网址</span>
                  <span>最多获取分页数, 0为不限: <el-input-number size="mini" controls-position="right"></el-input-number></span>
                  <span><el-checkbox label="自动识别分页"></el-checkbox></span>
                </div>
                <div>
                  <el-checkbox label="无限极分页模式下, 重复网址自动终止采集"></el-checkbox>
                  <el-tooltip placement="right">
                    <template v-slot:content>
                      分页数配置为0, 即使用'无限极分页模式'时,<br/>
                      若某一页采集到的下一级列表页均为重复网址,<br/>
                      则自动停止分页的继续采集. <br/>
                      注: 该功能主要为防止后续网址均为重复网址,<br/>
                      从而造成的采集资源浪费.
                    </template>
                    <i class="el-icon-info"></i>
                  </el-tooltip>
                </div>
                <div class="page-interval">
                  <el-button class="divide" type="text" @click="insert('textarea', 'intervalStart', '(*)')">(*)</el-button>
                  <el-input type="textarea" :rows="5" resize="none" ref="intervalStart" placeholder="区域开始字符串"></el-input>
                  <div class="divide">-</div>
                  <el-input type="textarea" :rows="5" resize="none" ref="intervalEnd" placeholder="区域结束字符串"></el-input>
                  <el-button class="divide" type="text" @click="insert('textarea', 'intervalEnd', '(*)')">(*)</el-button>
                </div>
                <el-row :gutter="10" class="page-bottom">
                  <el-col :span="12">
                    <div class="page-bottom-title">
                      地址样式:
                      <el-button type="text" size="mini" @click="insert('textarea', 'urlFormat', '[参数]')">[参数]</el-button>
                      <el-button type="text" size="mini" @click="insert('textarea', 'urlFormat', '(*)')">(*)</el-button>
                    </div>
                    <el-input type="textarea" :rows="6" resize="none" ref="urlFormat" placeholder="如:<a href='http://[参数].com/[参数]' target='_blank'></a>" />
                  </el-col>
                  <el-col :span="12">
                    <div class="page-bottom-title">
                      分页地址:
                      <el-button type="text" size="mini" @click="insert('textarea', 'pageSite', '[参数N]')">[参数N]</el-button>
                    </div>
                    <el-input type="textarea" :rows="6" resize="none" ref="pageSite" placeholder="如: http://[参数1].com/[参数2]" />                  </el-col>
                </el-row>
              </div>
              <!-- post方法分页 -->
              <div class="http-setting http-post" v-if="httpMethods === 'post'">
                <div class="http-title">POST获取列表</div>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div class="page-bottom-title">
                      发送的数据:
                      <el-button type="text" size="mini" @click="insert('textarea', 'postSend', '[POST随机值X]')">[POST随机值X]</el-button>
                      <el-button type="text" size="mini" @click="insert('textarea', 'postSend', '[分页]')">[分页]</el-button>
                      <el-button type="text" size="mini" @click="insert('textarea', 'postSend', '[文本]')">[文本]</el-button>
                    </div>
                    <el-input type="textarea" :rows="10" ref="postSend"></el-input>
                    <div class="page-set-item">[分页]标签从<el-input-number size="mini" :controls="false" /> 到 <el-input-number size="mini" :controls="false" /></div>
                    <div class="post-import-block">
                      文本导入变量<el-input class="import-input" type="text" size="mini"/><label class="import-label" for="import-page">...</label>
                      <input class="hide" type="file" id="import-page">
                    </div>
                    <div class="page-set-item">
                      <el-checkbox label="文本转义"></el-checkbox>
                      <span>一行一个, 使用[文本]标签</span>
                    </div>
                  </el-col>
                  <el-col :span="12" class="post-table">
                    <el-table>
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column label="调用标签名"></el-table-column>
                      <el-table-column label="前字符串"></el-table-column>
                      <el-table-column label="后字符串"></el-table-column>
                    </el-table>
                    <tool-list>
                      <template v-slot:toolItem>
                        <div class="tool-item"><icon-tip content="添加" eleIcon="el-icon-plus"></icon-tip></div>
                        <div class="tool-item"><icon-tip content="编辑" eleIcon="el-icon-edit"></icon-tip></div>
                        <div class="tool-item"><icon-tip content="删除" eleIcon="el-icon-close"></icon-tip></div>
                        <div class="tool-item"><icon-tip content="清空" eleIcon="el-icon-delete"></icon-tip></div>
                      </template>
                    </tool-list>
                  </el-col>
                </el-row>
              </div>
              <!-- ASPX POST 方法分页 -->
              <div class="http-setting http-aspx" v-if="httpMethods === 'aspx'">
                <div class="http-title">ASP.NET POST获取列表</div>
                <el-form :inline="true">
                  <el-form-item label="请求的页面范围:">
                    从 <el-input-number size="mini" :controls="false"></el-input-number>
                    到 <el-input-number size="mini" :controls="false"></el-input-number>
                    &nbsp;&nbsp;<small-tip v-slot:content>自动识别需要从第一页开始</small-tip>
                  </el-form-item>
                </el-form>
                <small-tip v-slot:content>
                  可自动识别大多数Aspx网站的POST分页, 如果测试出错, 请提交网址给我们测试或者直接使用上面第二项POST, 直接指定POST相关参数
                </small-tip>
              </div>
            </el-tab-pane>
            <el-tab-pane label="列表页独立标签" name="third">
              <div class="alone-tag">
                <el-form label-width="100px">
                  <el-form-item label="标签提取方式:">
                    <el-row :gutter="10">
                      <el-col :span="6">
                        <el-input type="textarea" ref="extractMethod" :rows="8"></el-input>
                      </el-col>
                      <el-col :span="4">
                        <el-button type="text" @click="insert('textarea', 'extractMethod', '[标签:XXX]')">[标签:XXX]</el-button>
                        <br />
                        <el-button type="text" @click="insert('textarea', 'extractMethod', '(*)')">(*)</el-button>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
                <div><el-checkbox label="从列表页网址采集"></el-checkbox></div>
                <small-tip class="the-tips" title="列表页独立标签" v-slot:content>
                  从整体列表页源码中独立获取的标签, 不参与内容网址获取的循环, 将直接复制填充到每条记录. 默认从内容页源码中进行采集
                </small-tip>
                <small-tip class="the-tips" title="列表页标签" v-slot:content>
                  指列表页下每个内容页地址的循环源码块中的标签, 与内容页获取的标签共同组成一条完整的记录. (在手动设置网址获取规则处提取列表页标签)
                </small-tip>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import insertText from '@/utils/insertText'
import SelectList from './SelectList.vue'
import IconTip from '@/components/IconTip.vue'
import ToolList from '@/components/ToolList.vue'
import SmallTip from '@/components/SmallTip.vue'
export default {
  name: 'ContentUrlSet',
  components: {
    SelectList,
    IconTip,
    ToolList,
    SmallTip
  },
  data () {
    return {
      mode: 'normal',
      selectLabel: '1级标签页',
      urlMethods: 'auto',
      diyForm: {
        rule: '',
        url: ''
      },
      localForm: {
        start: '',
        end: ''
      },
      filterForm: {
        include: '',
        expect: ''
      },
      urlFilterRadio: 0,
      activeAdvancedSet: 'first',
      httpMethods: 'get'
    }
  },
  methods: {
    insert (type, el, text) {
      const dom = this.$refs[el]
      insertText(dom.$refs[type], text)    
    },
    goToAdvanced () {
      this.mode = 'advanced'
    },
    goToNormal () {
      this.mode = 'normal'
    }
  }
}
</script>
<style lang="scss" scoped>
.content-url-set {
  padding: 20px;
  .get-methods {
    min-height: 548px;
  }
  .the-title {
    padding-bottom: 20px;
  }
  .get-filter {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .filter-text {
      margin-right: 20px;
    }
    .filter-tip {
      margin-left: 40px;
      width: 536px;
      padding: 0;
    }
  }
  .get-setting {
    .setting-bottom {
      margin-top: 10px;
    }
    .setting-link {
      padding: 10px 0;
      text-align: right;
    }
  }
  .setting-card {
    border: 1px solid #dfdfdf;
    .card-header {
      padding: 5px 20px;
      border-bottom: 1px solid #ebeef5;
      .card-header-filter {
        margin-left: 20px;
      }
    }
    .card-body {
      min-height: 130px;
      padding: 20px 20px 0;
      box-sizing: border-box;
      .divide {
        margin: 0 5px;
      }
      &.auto-get,
      &.diy-get {
        min-height: 157px;
      }
      &.auto-get {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 22px;
      }
      &.diy-get {
        .insert-btn {
          padding-left: 20px;
        }
      }
      &.set-local,
      &.url-filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
      }
    }
  }
  .advance-mode {
    .to-normal-btn {
      width: 100%;
      margin-top: 20px;
    }
    .advanced-first {
      .get-filter {
        margin: 20px 0;
      }
    }
    .setting-tab {
      position: relative;
      .label-title {
        position: absolute;
        text-decoration: underline #000;
        left: 0;
        right: 0;
        margin: auto;
        top: 10px;
        text-align: center;
      }
    }
    .http-setting {
      .http-title {
        text-align: center;
        padding: 5px;
        border-bottom: 1px solid #dfdfdf;
        border-top: 1px solid #dfdfdf;
      }
      &.http-get {
        .page-filter {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 60%;
          padding: 20px 0;
        }
        .page-interval {
          display: flex;
          align-items: center;
          margin: 20px 0;
          .divide {
            padding: 0 10px;
          }
        }
      }
      &.http-post {
        .page-set-item {
          padding-top: 20px;
        }
        .post-import-block {
          display: flex;
          padding-top: 20px;
          .import-label {
            background: #000;
            width: 38px;
            text-align: center;
            color: #fff;
            cursor: pointer;
          }
          .import-input {
            width: 604px;
          }
        }
        .post-table {
          display: flex;
        }
      }
    }
    .alone-tag {
      padding-left: 40px;
      .the-tips {
        display: block;
        margin: 20px 0;
      }
    }
  }
}
</style>
